<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>
                        <li v-for="(item,index) in personalTabList" :key="index" :class="[tabIndex == index ? 'active' : '']" @click="getUserIdentityAuth(index)">
                            <a>{{item}}</a>
                            <div class="after"></div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- safety begin -->
            <div class="safety-layout" v-if="tabIndex == 0">
                <div class="safety-title">
                    <h2>账号设置</h2>
                </div>
                <ul class="safety-list">
                    <li>
                        <div class="safety-head">
                            <img src="../../assets/img/management/s-photo.png">
                        </div>
                        <div class="safety-view">
                            <label v-if="detailObj.phone">手机账号已绑定<span class="red">已绑定</span></label>
                            <label v-else>手机账号尚未绑定<span class="red">尚未绑定</span></label>
                            <p >您可以享受手机相关的安全及提醒服务</p>
                        </div>
                        <div class="safety-bt-b" v-if="detailObj.phone">
                            <span @click="isBinding = true">解除绑定</span>
                        </div>
                        <div class="safety-bt-h" v-else>
                            <span>绑定</span>
                        </div>
                    </li>

                    <li>
                        <div class="safety-head">
                            <img src="../../assets/img/management/s-zfb.png">
                        </div>
                        <div class="safety-view" v-if="moneyObj.checked == 0">
                            <label>支付宝绑定<span class="red">尚未绑定</span></label>
                            <p>绑定支付宝后，可使用提现服务</p>
                        </div>
                        <div class="safety-view" v-else>
                            <label>支付宝绑定<span class="red">已绑定</span></label>
                            <p>绑定支付宝后，可使用提现服务</p>
                        </div>
                        <div class="safety-bt-h" v-if="moneyObj.checked == 0" @click="zfbBd = true">
                            <span>绑定</span>
                        </div>
                        <div class="safety-bt-b" v-else>
                            <span @click="hnit()">解除绑定</span>
                        </div>
                        
                    </li>
                </ul>

                <div class="safety-title">
                    <h2>社交账号绑定</h2>
                </div>
                <ul class="safety-list">
                    <li>
                        <div class="safety-head">
                            <img src="../../assets/img/management/s-wx.png">
                        </div>
                        <div class="safety-view">
                            <label>微信绑定<span v-if="detailObj.bindWx">差不多先生</span></label>
                            <p>微信绑定账号，使用微信便捷登陆</p>
                        </div>
                        <div class="safety-bt-h" v-if="detailObj.bindWx == false">
                            <span @click="wxBind()">绑定</span>
                        </div>
                        <div class="safety-bt-b" v-else>
                            <span @click="wxJcBind()">解除绑定</span>
                        </div>
                    </li>

                    <!-- <li>
                        <div class="safety-head">
                            <img src="../../assets/img/management/s-qq.png">
                        </div>
                        <div class="safety-view">
                            <label>绑定QQ<span class="red">尚未绑定</span></label>
                            <p>微信绑定账号，使用微信便捷登陆 拷贝</p>
                        </div>
                        <div class="safety-bt-h">
                            <a>绑定</a>
                        </div>
                    </li> -->
                </ul>
            </div>
            <!-- safety end -->
            <!-- <div class="body-share" v-if="tabIndex == 2"></div>
            <div class="wxbd" v-if="tabIndex == 2">
                <img src="../../assets/img/pay/Pay-QR.png">
                <label>扫一扫，绑定微信</label>
            </div> -->
            <!-- 实名认证 -->
            <div class="Authentication-layout" v-else-if="tabIndex == 1">
                <div class="Authentication-view">
                    <div class="Authentication-view-title">身份证正面<span>（小于2M）</span></div>
                    <div class="Authentication-view-left">
                        <a class="renzheng">
                            <img v-if="img1 == ''||img1==null||img1==undefined" src="../../assets/img/Request-Service/上传图片.jpg">
                            <img v-else :src="$imgPath(img1)" alt="" srcset="">
                            <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput1" @change="changeImage(1)">
                        </a>
                    </div>
                    <div class="Authentication-view-right">
                        <div class="name">示例：</div>
                        <div class="li-pic">
                            <img src="../../assets/img/management/正面.png">
                        </div>
                        <div class="li-list">
                            <p> 1.请严格按照示例图上传图片;</p>
                            <p> 2.确保四角对其，信息完整，如有模糊反光太暗有遮挡，则不予认证。</p>
                        </div>
                    </div>
                </div>

                <div class="Authentication-view">
                    <div class="Authentication-view-title">身份证背面<span>（小于2M）</span></div>
                    <div class="Authentication-view-left">
                        <a class="renzheng">
                            <img v-if="img2 == ''||img1==null||img1==undefined" src="../../assets/img/Request-Service/上传图片.jpg">
                            <img v-else :src="$imgPath(img2)" alt="" srcset="">
                            <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput2" @change="changeImage(2)">
                        </a>
                    </div>
                    <div class="Authentication-view-right">
                        <div class="name">示例：</div>
                        <div class="li-pic">
                            <img src="../../assets/img/management/正面.png">
                        </div>
                        <div class="li-list">

                        </div>
                    </div>
                </div>
                <div class="Authentication-view">
                    <div class="Authentication-view-title">手持省份证照片<span>（小于2M）</span></div>
                    <div class="Authentication-view-left">
                        <a class="renzheng">
                            <img v-if="img3 == ''||img1==null||img1==undefined" src="../../assets/img/Request-Service/上传图片.jpg">
                            <img v-else :src="$imgPath(img3)" alt="" srcset="">
                            <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput3" @change="changeImage(3)">
                        </a>
                    </div>
                    <div class="Authentication-view-right">
                        <div class="name">示例：</div>
                        <div class="li-pic">
                            <img src="../../assets/img/management/手持.png">
                        </div>
                        <div class="li-list">
                            <p> 1.请保证人脸清晰，且全脸在画面中；。</p>
                            <p> 2.请确保身份证信息侵袭可见，无遮拦</p>
                        </div>
                    </div>
                </div>
                <div class="addSQ">
                    <span @click="card()">提交申请</span>
                </div>
            </div>            
        </div> 
        <Modal v-model="isBinding" title="更换手机号" width="500px;" :footer-hide="true">
            <p class="replace-title">为保障您的账户安全，请校验原手机信息</p>
            <div class="replace-phone">
                <span class="replace-sj">原手机号：</span>
                <input type="phone" v-model="detailObj.phone" class="phone" readonly>
            </div>
            <div class="replace-phone">
                <span class="replace-sj">验证码：</span>
                <p class="replace-yzm-box">
                    <input type="text" class="replace-yzm" v-model="code">
                    <span class="fasong" @click="fasong()">{{btntxt}}</span>
                </p>
            </div>
            <div class="gift-button replace-nextStep">
                <span class="nextStep" @click="yzPhone()">下一步</span>
            </div>
        </Modal>
        <Modal v-model="isBindingTwo" title="更换手机号" width="500px;" :footer-hide="true">
            <p class="replace-title">请输入您要更换的新手机号码</p>
            <div class="replace-phone">
                <span class="replace-sj">新手机号：</span>
                <input type="phone" v-model="newPhone" class="phone">
            </div>
            <div class="replace-phone">
                <span class="replace-sj">验证码：</span>
                <p class="replace-yzm-box">
                    <input type="text" class="replace-yzm" v-model="code">
                    <span class="fasong" @click="fasong()">{{btntxt}}</span>
                </p>
            </div>
            <div class="gift-button replace-nextStep">
                <span class="nextStep" @click="updatePhone()">下一步</span>
            </div>
        </Modal>
        <Modal v-model="isBindingSan" title="更换手机号" width="500px;" :footer-hide="true">
            <div class="replace-success">
                <img src="../../assets/img/pay/radiao-icon.png" alt="">
                <span class="phone-success">手机号更换成功</span>
            </div>
            <p class="replace-success-phone">更换后的手机号为{{newPhone}}</p>
            <p class="replace-success-phone" style="font-size:12px;margin-top:0;margin-bottom:40px;">请使用该号码登录简单约玩</p>
        </Modal>
        <Modal v-model="zfbBd" title="绑定支付宝" width="500px;" :footer-hide="true">
            <p class="replace-title">请输入您要提现的支付宝账号</p>
            <div class="replace-phone">
                <span class="replace-sj" style="margin-left:68px;">账号：</span>
                <input type="phone" v-model="fetchAccount" class="phone">
            </div>
            <div class="replace-phone">
                <span class="replace-sj" style="margin-left:68px;">姓名：</span>
                <input type="phone" v-model="personName" class="phone">
            </div>
            <div class="gift-button replace-nextStep">
                <span class="nextStep" @click="bdZfb()">绑定</span>
            </div>
        </Modal>
        
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    props:['detailObj','moneyObj','wxCode','tabActive'],
    data(){
        return{
            // personalTabList:['相册展示','安全与隐私','实名认证'],
            personalTabList:['安全与隐私','实名认证'],
            tabIndex: 0,
            img1:'',
            img2:'',
            img3:'',
            isBinding:false,
            isBindingTwo:false,
            isBindingSan:false,
            zfbBd:false,            // 绑定支付宝弹框
            btntxt:'发送验证码',
            time:0,             // 验证码时间
            code:'',            // 验证码
            newPhone:'',        // 新手机号码
            fetchAccount:'',           // 支付宝号码
            personName:'',           // 真实姓名
        }
    },
    mounted(){
        if(this.wxCode != ''){
            this.wechat()
        }
        this.tabIndex = this.tabActive
    },
    methods:{
        hnit(){
            this.$Message.info('请联系客服解除绑定……');
        },
        // 上传图片
        changeImage(type){
            console.log(type)
            let fd = new FormData()
            fd.append('model','user/auth')
            if (this.$refs.avatarInput1.files.length !== 0 && type == 1) {
                fd.append('file', this.$refs.avatarInput1.files[0])
            }else if(this.$refs.avatarInput2.files.length !== 0 && type == 2){
                fd.append('file', this.$refs.avatarInput2.files[0])
            }else{
                fd.append('file', this.$refs.avatarInput3.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200 && type == 1){
                    this.img1 = resp.data.url
                }else if(resp.code == 200 && type == 2){
                    this.img2 = resp.data.url

                }else if(resp.code == 200 && type == 3){
                    this.img3 = resp.data.url
                }else{
                    Toast(resp.message)
                }
            })
        },
        // 身份认证
        card(){
            if(this.img1==""||this.img1==null||this.img1==undefined){
                this.$Message.warning('请上传正面照');
                return;
            }
            if(this.img1==""||this.img1==null||this.img1==undefined){
                this.$Message.warning('请上传反面照');
                return;
            }
            if(this.img3==""||this.img3==null||this.img3==undefined){
                this.$Message.warning('请上传手持身份证照');
                return;
            }
           let that = this;
           let data={
               idFrontPic:this.img1,//正面照
               idReversePic:this.img2,//反面照
               idHandPic:this.img3//手持身份证照
           }
            apiHttp.apiCenter.addUserIdentityAuth(data,resp=>{
                if(resp.code == 200){
                    this.$Message.success('认证提交成功，请您耐心等待')
                }else{
                    this.$Message.error(resp.data)
                }
            })
        },
        // 发送
        fasong(){
            if(this.time == 0){
                this.time=60
                this.yzm()
                this.timer()
            }
        },
        // 验证码倒计时
        timer() {
            if (this.time > 0) {
                this.time--
                this.btntxt=this.time+"s后重新获取"
                setTimeout(this.timer, 1000)
            } else{
                this.time = 0
                this.btntxt = "获取验证码"
            }
        },
        // 发送验证码
        yzm(){
            let phone = '',type = ''
            if(this.isBinding){
                phone = this.detailObj.phone
                type = 1
            }else{
                phone = this.newPhone
                type = 0
            }
            apiHttp.apiLogin.yzm(phone,type,'',resp=>{
                if(resp.code==200){
                    this.$Message.success('验证码发送成功')
                }
            })
        },
        // 验证验证码是否正确
        yzPhone(){
            let parmes = {
                type: 1,
                phone: this.detailObj.phone,
                code:this.code
            }
            apiHttp.apiCenter.smsVerify(parmes,resp=>{
                if(resp.code == 200){
                    clearTimeout(this.timer)
                    this.time = 0
                    this.code = ''
                    this.btntxt = '发送验证码'
                    this.isBinding = false
                    this.isBindingTwo = true
                }else{
                    this.$Message.error(resp.message)
                    this.code = ''
                }
            })
        },
        // 更换新的手机号
        updatePhone(){
            let parmes = {
                type: 0
            }
            apiHttp.apiCenter.updatePhone(this.newPhone,this.code,parmes,resp=>{
                if(resp.code == 200){
                    this.isBindingTwo = false
                    this.isBindingSan = true
                    this.$Message.success('换帮成功')
                }else{
                    this.$Message.error(resp.message)
                }
            })
        },
        // 支付宝绑定
        bdZfb(){
            if(this.fetchAccount ==null||this.fetchAccount==''||this.fetchAccount==undefined){
                this.$Message.warning("请填写支付宝账号！")
                return                 
            }
            if(this.personName ==null||this.personName==''||this.personName==undefined){
                this.$Message.warning("请填写真实姓名！")
                return                 
            }
            let params = {
                fetchAccount:this.fetchAccount,
                fetchType:1,
                personName:this.personName
            }
            apiHttp.apiCenter.fetchData(params,resp=>{
                if(resp.code == 200){
                    this.$Message.success("绑定成功")
                    this.zfbBd = !this.zfbBd
                    this.$emit('wallet')
                }
            })
        },
        // 判断是否在认证
        getUserIdentityAuth(index){
            if(index == 1){
                apiHttp.apiCenter.getUserIdentityAuth('',resp=>{
                    if(resp.code == 200){
                        if(resp.data.status == 2){
                            this.$Message.warning("身份认证审核中，请耐心等待")
                        }else if(resp.data.status == 1){
                            this.$Message.warning("您已身份认证通过，如需修改请联系客服")
                        }else{
                            this.tabIndex = index
                        }
                    }
                })
            }else{
                this.tabIndex = index
            }
        },
        // 微信绑定
        wxBind(){
            window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx2533aacf8ed1c076&redirect_uri=http%3a%2f%2fwww.jdyuewan.net/center?leftIndex=8&response_type=code&scope=snsapi_login&state=38315ff8767e77c485ab08ad26448a69#wechat_redirect` 
        },
        // 判断微信绑定
        wechat(){
            let params = {
                wxCode:this.wxCode
            }
            apiHttp.apiCenter.wechat(this.$qs.stringify(params),resp=>{
                if(resp.code == 200){
                    this.$Message.success("微信绑定成功")
                    this.$parent.screening()
                }else{
                    this.$Message.error(resp.message)
                }
            })
        },
        // 微信解除绑定
        wxJcBind(){
            apiHttp.apiCenter.jcWechat('',resp=>{
                if(resp.code == 200){
                    this.$Message.success("微信解除绑定成功")
                    this.$parent.screening()
                }
            })
        }
    }
    
}
</script>
<style scoped>
.addSQ{
    width: 100%;
    height: 46px;
    float: left;
    margin: 30px 0;
}
.addSQ span{
    width: 200px;
    height: 46px;
    background-color: #d84e4d;
    display: inline-block;
    font-size: 22px;
    line-height: 46px;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    margin-left: 300px;
}
.Authentication-view-left{
    width: 280px;
}
.renzheng{
    position: relative;
    width: 280px;
    height: 180px;
    display: block;
    margin: 0 auto;
}
.Authentication-view-right .name{
    float: left;
    padding-left: 10px;
}
.Authentication-view-right .li-list p{
    font-size: 12px;
}
.Authentication-layout{
    padding: 30px 60px 30px 30px;
}
.renzheng input{
    position: absolute;
    left: 0;
    top:0;
    width: 280px;
    height: 180px;
    opacity: 0;
    z-index: 10;
    font-size: 0;
}
</style>

